<template>
  <div class="graph-visualization">
    <div class="graph-header">
      <h3>{{ title }}</h3>
      <div class="graph-controls">
        <el-button-group>
          <el-button @click="handleExport" type="primary" plain class="control-button">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
          <el-button @click="toggleFullscreen" type="primary" plain class="control-button">
            <el-icon><FullScreen v-if="!isFullscreen" /><Close v-else /></el-icon>
            {{ isFullscreen ? '退出全屏' : '全屏' }}
          </el-button>
        </el-button-group>
      </div>
    </div>
    
    <div v-if="graphData?.industryInfo" class="industry-info-header">
      <div class="industry-info-inner">
        <div class="info-item">
          <span class="info-label">所属行业</span>
          <span class="info-value">{{ graphData.industryInfo.name }}</span>
        </div>
        <div class="info-separator"></div>
        <div class="info-item">
          <span class="info-label">风险阈值</span>
          <span class="info-value">≥ {{ graphData.industryInfo.riskThreshold }}</span>
        </div>
        <div class="info-separator"></div>
        <div class="info-item">
          <span class="info-label">企业总数</span>
          <span class="info-value">{{ graphData.industryInfo.companyCount }}</span>
        </div>
      </div>
    </div>
    
    <div class="graph-content">
      <div v-if="graphData?.nodes?.length > 0" class="graph-inner">
        <div id="graph-container" class="graph-container" ref="graphContainer"></div>
      </div>
      <el-empty v-else description="暂无图谱数据" />
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { Download, FullScreen, Close } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { ElMessageBox } from 'element-plus';

export default {
  name: 'GraphVisualization',
  components: {
    Download,
    FullScreen,
    Close
  },
  props: {
    title: {
      type: String,
      default: '企业关系图谱'
    },
    graphData: {
      type: Object,
      default: () => ({ nodes: [], relationships: [] })
    },
    activeTab: {
      type: String,
      default: ''
    }
  },
  emits: ['export'],
  setup(props, { emit }) {
    const graphContainer = ref(null);
    const isFullscreen = ref(false);
    let graphChart = null;
    let initTimer = null;

    const ensureContainerReady = () => {
      return new Promise((resolve) => {
        const checkContainer = () => {
          if (!graphContainer.value) {
            setTimeout(checkContainer, 50);
            return;
          }

          const container = graphContainer.value;
          if (!container.offsetWidth || !container.offsetHeight) {
            console.log('[GraphVisualization] 容器尺寸未就绪，等待...');
            setTimeout(checkContainer, 50);
            return;
          }

          console.log('[GraphVisualization] 容器已就绪:', 
            container.offsetWidth, 'x', container.offsetHeight);
          resolve(container);
        };

        checkContainer();
      });
    };

    const initChart = () => {
      try {
        if (!graphContainer.value) {
          console.error('[GraphVisualization] 图表容器不存在，无法初始化图表');
          return;
        }
        
        // 检查当前容器是否在DOM中并可见
        if (!document.body.contains(graphContainer.value) || 
            !graphContainer.value.offsetParent) {
          console.warn('[GraphVisualization] 图表容器不在DOM中或不可见，延迟初始化');
          setTimeout(initChart, 100);
          return;
        }
        
        console.log('[GraphVisualization] 开始初始化图表');
        
        if (graphChart) {
          graphChart.dispose();
        }
        
        try {
          graphChart = echarts.init(graphContainer.value);
          console.log('[GraphVisualization] 图表实例化成功');
          
          // 初始化好图表后，立即更新数据
          if (props.graphData && (props.graphData.nodes || props.graphData.relationships)) {
            updateChart();
          }
        } catch (error) {
          console.error('[GraphVisualization] 图表实例化失败:', error);
        }
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
          if (graphChart) {
            graphChart.resize();
          }
        });
      } catch (error) {
        console.error('[GraphVisualization] 初始化图表过程中出现错误:', error);
      }
    };

    const updateChart = () => {
      try {
        if (!graphChart) {
          console.warn('[GraphVisualization] 图表实例不存在，尝试初始化');
          initChart();
          return;
        }
        
        if (!graphContainer.value || !document.body.contains(graphContainer.value)) {
          console.warn('[GraphVisualization] 图表容器不在DOM中，跳过更新');
          return;
        }
        
        if (!props.graphData?.nodes || props.graphData.nodes.length === 0) {
          console.log('[GraphVisualization] 无节点数据，跳过渲染');
          return;
        }

        console.log('[GraphVisualization] 更新图表数据, 节点数:', props.graphData.nodes.length);
        if (props.graphData.nodes[0]) {
          console.log('[GraphVisualization] 原始节点数据示例:', JSON.stringify(props.graphData.nodes[0]));
        }
        if (props.graphData.links && props.graphData.links[0]) {
          console.log('[GraphVisualization] 原始关系数据示例:', JSON.stringify(props.graphData.links[0]));
        }

        // 处理节点数据 - 确保节点ID唯一
        const nodeMap = new Map(); // 用于检测和处理重复节点
        const nodes = [];

        // 确保节点ID是字符串类型
        props.graphData.nodes.forEach((node, index) => {
          // 检查节点是否有嵌套的value对象，如果有则合并到节点数据中
          let nodeData = { ...node };
          if (node.value && typeof node.value === 'object') {
            console.log('[GraphVisualization] 发现嵌套value对象，合并数据:', JSON.stringify(node.value));
            // 将value对象中的属性复制到节点本身
            nodeData = { ...node, ...node.value };
          }
          
          // 打印完整的节点数据，用于调试
          console.log('[GraphVisualization] 完整节点数据:', JSON.stringify(nodeData));
          
          // 检查节点类型 - 产品/材料节点和企业节点处理逻辑不同
          const isProductNode = nodeData.type === 'Product' || nodeData.type === 'Material';
          
          if (isProductNode) {
            // 产品或材料节点的处理逻辑
            // 确保节点ID唯一且为字符串类型
            let uniqueId = String(nodeData.id || nodeData.name);
            if (nodeMap.has(uniqueId)) {
              // 如果ID重复，添加索引作为后缀
              uniqueId = `${uniqueId}_${index}`;
            }
            nodeMap.set(uniqueId, true);
            
            // 使用统一的节点大小设置
            const size = 45; // 与企业节点保持一致的大小
            const category = nodeData.type === 'Product' ? 0 : 1;
            
            nodes.push({
              ...nodeData, // 保留所有处理后的节点字段
              id: uniqueId, // 使用确保唯一的ID
              type: nodeData.type || 'Product',
              description: nodeData.description || '',
              category: category,
              symbolSize: size,
              // 如果有logo，则使用logo作为节点图标
              symbol: nodeData.logo ? 'image://' + nodeData.logo : 'circle',
              label: {
                show: true,
                position: 'right',
                formatter: function(params) {
                  const name = params.name || '';
                  return name.length > 10 ? name.substring(0, 10) + '..' : name;
                },
                fontSize: 14,
                color: '#333',
                backgroundColor: 'rgba(255, 255, 255, 0.7)',
                padding: [3, 5],
                borderRadius: 3
              },
              itemStyle: {
                color: nodeData.type === 'Product' ? '#67C23A' : '#FF9800',
                borderWidth: 2,
                borderColor: 'rgba(255, 255, 255, 0.8)'
              }
            });
          } else {
            // 企业节点的处理逻辑 - 保留原有的企业节点处理方式
            // 添加详细字段调试
            console.log(`[GraphVisualization] 节点${nodeData.name}字段检查:`,
              '员工数量:', nodeData.employeeCount, 
              '成立年份:', nodeData.establishYear || nodeData.establishedYear,
              '风险数量:', nodeData.riskCount);
            
            // 直接使用原始字段或从value合并的字段
            const isHighTech = nodeData.isHighTech === true;
            // 确保数值0也被正确处理而不是转为"未知"
            const nodeRiskCount = typeof nodeData.riskCount === 'number' ? nodeData.riskCount : 0;
            
            // 使用统一的节点大小
            let size = 45; // 统一的节点大小
            
            // 确保节点ID唯一且为字符串类型
            let uniqueId = String(nodeData.id || nodeData.name);
            if (nodeMap.has(uniqueId)) {
              // 如果ID重复，添加索引作为后缀
              uniqueId = `${uniqueId}_${index}`;
            }
            nodeMap.set(uniqueId, true);
            
            // 确保风险数量和员工数量始终作为数值处理
            const finalRiskCount = typeof nodeData.riskCount === 'number' ? nodeData.riskCount : 0;
            
            // 处理员工数量，可能来自不同字段
            let displayEmployeeCount = '未知';
            if (typeof nodeData.employeeCount === 'number') {
              displayEmployeeCount = nodeData.employeeCount;
            } else if (typeof nodeData.staffCount === 'number') {
              displayEmployeeCount = nodeData.staffCount;
            } else if (nodeData.employeeCount === '0' || nodeData.employeeCount === 0) {
              displayEmployeeCount = 0;
            } else if (nodeData.staffCount === '0' || nodeData.staffCount === 0) {
              displayEmployeeCount = 0;
            } else if (nodeData.value && typeof nodeData.value.employeeCount === 'number') {
              displayEmployeeCount = nodeData.value.employeeCount;
            } else if (nodeData.value && typeof nodeData.value.staffCount === 'number') {
              displayEmployeeCount = nodeData.value.staffCount;
            } else if (nodeData.employeeCount === '未知' || nodeData.staffCount === '未知') {
              displayEmployeeCount = '未知';
            }
            
            // 处理建立年份字段 - 可能使用多种不同字段名
            let establishYear = '未知';
            if (typeof nodeData.establishYear === 'number') {
              establishYear = nodeData.establishYear > 0 ? nodeData.establishYear : '未知';
            } else if (typeof nodeData.establishedYear === 'number') {
              establishYear = nodeData.establishedYear > 0 ? nodeData.establishedYear : '未知';
            } else if (typeof nodeData.foundYear === 'number') {
              establishYear = nodeData.foundYear > 0 ? nodeData.foundYear : '未知';
            } else if (nodeData.value && typeof nodeData.value.establishYear === 'number') {
              establishYear = nodeData.value.establishYear > 0 ? nodeData.value.establishYear : '未知';
            } else if (nodeData.value && typeof nodeData.value.establishedYear === 'number') {
              establishYear = nodeData.value.establishedYear > 0 ? nodeData.value.establishedYear : '未知';
            } else if (nodeData.establishYear === '0' || nodeData.establishYear === 0) {
              establishYear = '未知';
            } else if (nodeData.establishedYear === '0' || nodeData.establishedYear === 0) {
              establishYear = '未知';
            } else if (nodeData.establishYear === '未知' || nodeData.establishedYear === '未知') {
              establishYear = '未知';
            } else if (typeof nodeData.establishYear === 'string' && !isNaN(parseFloat(nodeData.establishYear))) {
              const year = parseFloat(nodeData.establishYear);
              establishYear = year > 0 ? year : '未知';
            } else if (typeof nodeData.establishedYear === 'string' && !isNaN(parseFloat(nodeData.establishedYear))) {
              const year = parseFloat(nodeData.establishedYear);
              establishYear = year > 0 ? year : '未知';
            }
            
            // 确保注册资本正确显示
            let displayRegisteredCapital = '未知';
            if (typeof nodeData.registeredCapital === 'number') {
              displayRegisteredCapital = nodeData.registeredCapital + '万元';
            } else if (typeof nodeData.registeredCapital === 'string' && !isNaN(parseFloat(nodeData.registeredCapital))) {
              displayRegisteredCapital = parseFloat(nodeData.registeredCapital) + '万元';
            } else if (nodeData.registeredCapital) {
              displayRegisteredCapital = nodeData.registeredCapital;
            }
            
            nodes.push({
              ...nodeData, // 保留所有处理后的节点字段
              id: uniqueId, // 使用确保唯一的ID
              riskCount: finalRiskCount, // 确保风险数量字段存在
              employeeCount: displayEmployeeCount, // 确保员工数量字段存在
              establishYear: establishYear, // 确保成立年份字段存在
              category: isHighTech ? 0 : 1,
              symbolSize: size,
              // 如果有logo，则使用logo作为节点图标
              symbol: nodeData.logo ? 'image://' + nodeData.logo : 'circle',
              label: {
                show: true,
                position: 'right',
                formatter: function(params) {
                  const name = params.name || '';
                  return name.length > 10 ? name.substring(0, 10) + '..' : name;
                },
                fontSize: 14,
                color: '#333',
                backgroundColor: 'rgba(255, 255, 255, 0.7)',
                padding: [3, 5],
                borderRadius: 3
              },
              itemStyle: {
                borderWidth: 2,
                borderColor: 'rgba(255, 255, 255, 0.8)'
              }
            });
          }
        });

        // 处理关系数据，使用更新后的节点ID
        const relationships = [];
        if (props.graphData.links && props.graphData.links.length > 0) {
          console.log('[GraphVisualization] 原始关系数据详情:', JSON.stringify(props.graphData.links.slice(0, 3)));
          
          props.graphData.links.forEach(rel => {
            // 根据API返回的格式，source和target可能是ID或数值索引
            let sourceId = rel.source;
            let targetId = rel.target;
            
            // 如果source/target是数值，则视为直接ID而不是索引
            if (typeof sourceId === 'number') {
              sourceId = String(sourceId);
            } else {
              sourceId = String(sourceId);
            }
            
            if (typeof targetId === 'number') {
              targetId = String(targetId);
            } else {
              targetId = String(targetId);
            }
            
            // 查找节点
            const sourceNode = nodes.find(n => String(n.id) === sourceId);
            const targetNode = nodes.find(n => String(n.id) === targetId);
            
            // 如果找不到节点，再根据名称尝试查找
            const sourceNodeByName = !sourceNode ? nodes.find(n => n.name === sourceId) : null;
            const targetNodeByName = !targetNode ? nodes.find(n => n.name === targetId) : null;
            
            const finalSourceNode = sourceNode || sourceNodeByName;
            const finalTargetNode = targetNode || targetNodeByName;
            
            if (finalSourceNode && finalTargetNode) {
              relationships.push({
                id: rel.id,
                source: finalSourceNode.id,
                target: finalTargetNode.id,
                value: rel.type || 'SUPPLIES', // 使用type作为关系类型
                lineStyle: {
                  width: 0.8, // 进一步减小线条宽度
                  curveness: 0.2, // 弯曲度，增加视觉区分
                  color: '#2980b9',
                  opacity: 0.6 // 降低不透明度
                },
                label: {
                  show: false, // 隐藏关系文字标签
                  position: 'middle',
                  formatter: rel.type || rel.value || 'SUPPLIES',
                  fontSize: 12,
                  color: '#333',
                  backgroundColor: 'rgba(255, 255, 255, 0.8)',
                  padding: [3, 5],
                  borderRadius: 3
                },
                tooltip: {
                  formatter: function() {
                    return `${finalSourceNode.name} → ${rel.type || 'SUPPLIES'} → ${finalTargetNode.name}`;
                  }
                }
              });
            } else {
              console.warn(`[GraphVisualization] 无法找到关系的源节点或目标节点:`, 
                           sourceId, targetId, '源节点存在:', !!finalSourceNode, '目标节点存在:', !!finalTargetNode);
            }
          });
        } else if (props.graphData.relationships && props.graphData.relationships.length > 0) {
          // 兼容旧格式数据
          console.log('[GraphVisualization] 使用旧格式relationships数据...');
          props.graphData.relationships.forEach(rel => {
            const sourceNode = nodes.find(n => String(n.id) === String(rel.source));
            const targetNode = nodes.find(n => String(n.id) === String(rel.target));
            
            if (sourceNode && targetNode) {
              relationships.push({
                id: rel.id,
                source: sourceNode.id,
                target: targetNode.id,
                value: rel.type || rel.value || 'SUPPLIES',
                lineStyle: {
                  width: 0.8, // 进一步减小线条宽度
                  curveness: 0.2, // 弯曲度，增加视觉区分
                  color: '#2980b9',
                  opacity: 0.6 // 降低不透明度
                },
                label: {
                  show: false, // 隐藏关系文字标签
                  position: 'middle',
                  formatter: rel.type || rel.value || 'SUPPLIES',
                  fontSize: 12,
                  color: '#333',
                  backgroundColor: 'rgba(255, 255, 255, 0.8)',
                  padding: [3, 5],
                  borderRadius: 3
                }
              });
            }
          });
        }

        console.log('[GraphVisualization] 处理后的节点数据:', nodes[0]);
        console.log('[GraphVisualization] 处理后的关系数据:', relationships[0] || '无关系数据');
        console.log('[GraphVisualization] 节点数量:', nodes.length, '关系数量:', relationships.length);

        // 确定是否有产品/材料节点
        const hasProductNodes = nodes.some(node => node.type === 'Product' || node.type === 'Material');
        console.log('[GraphVisualization] 是否包含产品/材料节点:', hasProductNodes);

        // 确定是否为风险图表
        const isRiskGraph = nodes.length > 0 && 
                            nodes[0].riskCount !== undefined &&
                            props.activeTab === 'companyRisks'; // 只有企业风险分析页面才使用风险颜色
        
        // 为节点设置样式和类别
        nodes.forEach(node => {
          // 区分企业节点和产品/材料节点
          if (node.type === 'Product' || node.type === 'Material') {
            // 保持产品和材料节点的原有样式
            // ... existing code ...
          } else {
            // 企业节点处理
            const nodeRiskCount = typeof node.riskCount === 'number' ? node.riskCount : 0;
            const isHighTech = node.isHighTech === true;

            // 设置节点样式
            if (isRiskGraph) {
              // 企业风险分析页面 - 根据风险程度设置颜色
              let color = '#67C23A'; // 默认绿色 - 低风险
              let riskLevel = '低风险';
              
              if (nodeRiskCount >= 500) {
                color = '#F56C6C'; // 红色 - 高风险
                riskLevel = '高风险';
              } else if (nodeRiskCount >= 100) {
                color = '#E6A23C'; // 橙色 - 中高风险
                riskLevel = '中高风险';
              } else if (nodeRiskCount >= 50) {
                color = '#F2CA4C'; // 黄色 - 中风险
                riskLevel = '中风险';
              } else if (nodeRiskCount >= 20) {
                color = '#87D068'; // 浅绿色 - 较低风险
                riskLevel = '较低风险';
              }
              
              // 设置节点样式
              if (!node.logo) { // 只有在没有logo的情况下应用颜色
                node.itemStyle = {
                  color: isHighTech ? '#409EFF' : color,
                  borderWidth: 3, // 增加边框宽度
                  borderColor: 'rgba(255, 255, 255, 0.8)'
                };
              } else {
                // 有logo情况下添加边框色
                node.itemStyle = {
                  borderWidth: 3, // 增加边框宽度
                  borderColor: isHighTech ? '#409EFF' : color
                };
              }
              
              // 设置节点类别，用于图例显示
              if (isHighTech) {
                node.category = 0; // 高新企业
              } else {
                // 根据风险等级分类
                if (nodeRiskCount >= 500) {
                  node.category = 1; // 高风险
                } else if (nodeRiskCount >= 100) {
                  node.category = 2; // 中高风险
                } else if (nodeRiskCount >= 50) {
                  node.category = 3; // 中风险
                } else if (nodeRiskCount >= 20) {
                  node.category = 4; // 较低风险
                } else {
                  node.category = 5; // 低风险
                }
              }
            } else {
              // 产业链上下游和其他页面 - 根据是否高新企业设置颜色
              const color = isHighTech ? '#409EFF' : '#67C23A';
              
              if (!node.logo) { // 只有在没有logo的情况下应用颜色
                node.itemStyle = {
                  color: color,
                  borderWidth: 3, // 增加边框宽度
                  borderColor: 'rgba(255, 255, 255, 0.8)'
                };
              } else {
                // 有logo情况下添加边框色
                node.itemStyle = {
                  borderWidth: 3, // 增加边框宽度
                  borderColor: color
                };
              }
              
              // 设置节点类别，用于图例显示
              node.category = isHighTech ? 0 : 1; // 0:高新企业, 1:普通企业
            }
            
            // 增强标签样式
            node.label = {
              show: true,
              position: 'right',
              fontSize: 14,
              color: '#333',
              backgroundColor: 'rgba(255, 255, 255, 0.7)',
              padding: [3, 5],
              borderRadius: 3,
              formatter: function(params) {
                const name = params.name || '';
                return name.length > 10 ? name.substring(0, 10) + '..' : name;
              }
            };
          }
        });
        
        // 配置选项
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              // 区分节点类型和边类型
              console.log('Tooltip params:', params.dataType, params.data);
              if (params.dataType === 'node') {
                // 判断节点类型，处理不同类型的节点显示不同内容
                const nodeData = params.data;
                
                // 检查是否为产品或材料节点
                if (nodeData.type === 'Product' || nodeData.type === 'Material') {
                  // 产品/材料节点的提示信息
                  return `
                    <div style="padding:8px 0;">
                      <div style="font-weight:bold;margin-bottom:10px;font-size:15px;border-bottom:1px solid #eee;padding-bottom:8px;text-align:center;">${nodeData.name || ''}</div>
                      <div style="display:grid;grid-template-columns:auto auto;gap:8px 15px;">
                        <div style="font-weight:bold;color:#666;">类型:</div><div>${nodeData.type || '未知'}</div>
                        ${nodeData.description ? `<div style="font-weight:bold;color:#666;">描述:</div><div>${nodeData.description}</div>` : ''}
                      </div>
                    </div>
                  `;
                }
                
                // 企业节点的提示信息 - 保持原有的企业节点显示逻辑
                const company = params.data;
                
                // 获取企业数据，包括value中的数据
                let companyData = { ...company };
                if (company.value && typeof company.value === 'object') {
                  companyData = { ...companyData, ...company.value };
                }
                
                console.log('[GraphVisualization] Tooltip处理后的数据:', 
                  '员工数量:', companyData.employeeCount, 
                  '成立年份:', companyData.establishYear,
                  '风险数量:', companyData.riskCount);
                
                let companyLogoHtml = '';
                
                // 如果有企业logo，则展示logo
                if (companyData.logo) {
                  companyLogoHtml = `
                    <div style="text-align:center;margin-bottom:8px;">
                      <img src="${companyData.logo}" style="max-width:120px;max-height:60px;border-radius:4px;" onerror="this.style.display='none'"/>
                    </div>
                  `;
                }
                
                // 确保员工数量即使为0也正确显示
                let displayEmployeeCount = '未知';
                if (typeof companyData.employeeCount === 'number') {
                  displayEmployeeCount = companyData.employeeCount;
                } else if (typeof companyData.staffCount === 'number') {
                  displayEmployeeCount = companyData.staffCount;
                } else if (companyData.employeeCount === '0' || companyData.employeeCount === 0) {
                  displayEmployeeCount = 0;
                } else if (companyData.staffCount === '0' || companyData.staffCount === 0) {
                  displayEmployeeCount = 0;
                } else if (companyData.value && typeof companyData.value.employeeCount === 'number') {
                  displayEmployeeCount = companyData.value.employeeCount;
                } else if (companyData.value && typeof companyData.value.staffCount === 'number') {
                  displayEmployeeCount = companyData.value.staffCount;
                } else if (companyData.employeeCount === '未知' || companyData.staffCount === '未知') {
                  displayEmployeeCount = '未知';
                }
                
                // 确保成立年份即使为0也正确显示
                let displayEstablishYear = '未知';
                if (typeof companyData.establishYear === 'number') {
                  displayEstablishYear = companyData.establishYear > 0 ? companyData.establishYear : '未知';
                } else if (typeof companyData.establishedYear === 'number') {
                  displayEstablishYear = companyData.establishedYear > 0 ? companyData.establishedYear : '未知';
                } else if (typeof companyData.foundYear === 'number') {
                  displayEstablishYear = companyData.foundYear > 0 ? companyData.foundYear : '未知';
                } else if (companyData.value && typeof companyData.value.establishYear === 'number') {
                  displayEstablishYear = companyData.value.establishYear > 0 ? companyData.value.establishYear : '未知';
                } else if (companyData.value && typeof companyData.value.establishedYear === 'number') {
                  displayEstablishYear = companyData.value.establishedYear > 0 ? companyData.value.establishedYear : '未知';
                } else if (companyData.establishYear === '0' || companyData.establishYear === 0) {
                  displayEstablishYear = '未知';
                } else if (companyData.establishedYear === '0' || companyData.establishedYear === 0) {
                  displayEstablishYear = '未知';
                } else if (companyData.establishYear === '未知' || companyData.establishedYear === '未知') {
                  displayEstablishYear = '未知';
                } else if (typeof companyData.establishYear === 'string' && !isNaN(parseFloat(companyData.establishYear))) {
                  const year = parseFloat(companyData.establishYear);
                  displayEstablishYear = year > 0 ? year : '未知';
                } else if (typeof companyData.establishedYear === 'string' && !isNaN(parseFloat(companyData.establishedYear))) {
                  const year = parseFloat(companyData.establishedYear);
                  displayEstablishYear = year > 0 ? year : '未知';
                }
                
                // 确保风险数量即使为0也正确显示
                const displayRiskCount = (typeof companyData.riskCount === 'number') ? 
                  companyData.riskCount : 
                  (companyData.value && typeof companyData.value.riskCount === 'number' ? 
                    companyData.value.riskCount : 0);
                
                // 确保注册资本正确显示
                let displayRegisteredCapital = '未知';
                if (typeof companyData.registeredCapital === 'number') {
                  displayRegisteredCapital = companyData.registeredCapital + '万元';
                } else if (typeof companyData.registeredCapital === 'string' && !isNaN(parseFloat(companyData.registeredCapital))) {
                  displayRegisteredCapital = parseFloat(companyData.registeredCapital) + '万元';
                } else if (companyData.registeredCapital) {
                  displayRegisteredCapital = companyData.registeredCapital;
                }
                
                return `
                  <div style="padding:8px 0;">
                    ${companyLogoHtml}
                    <div style="font-weight:bold;margin-bottom:10px;font-size:15px;border-bottom:1px solid #eee;padding-bottom:8px;text-align:center;">${company.name}</div>
                    <div style="display:grid;grid-template-columns:auto auto;gap:8px 15px;">
                      <div style="font-weight:bold;color:#666;">企业规模:</div><div>${companyData.companyScale || '未知'}</div>
                      <div style="font-weight:bold;color:#666;">注册资本:</div><div>${displayRegisteredCapital}</div>
                      <div style="font-weight:bold;color:#666;">所在省份:</div><div>${companyData.province || '未知'}</div>
                      <div style="font-weight:bold;color:#666;">风险数量:</div><div style="color:#F56C6C;font-weight:bold">${displayRiskCount}</div>
                      <div style="font-weight:bold;color:#666;">是否高新:</div><div>${companyData.isHighTech ? '<span style="color:#409EFF">是</span>' : '否'}</div>
                      <div style="font-weight:bold;color:#666;">员工数量:</div><div>${displayEmployeeCount}</div>
                      <div style="font-weight:bold;color:#666;">成立年份:</div><div>${displayEstablishYear}</div>
                    </div>
                    ${companyData.description ? `<div style="margin-top:8px;border-top:1px solid #eee;padding-top:8px;"><div style="font-weight:bold;color:#666;">企业简介:</div><div style="margin-top:4px;">${companyData.description}</div></div>` : ''}
                    ${companyData.productImage ? `<div style="text-align:center;margin-top:8px;"><img src="${companyData.productImage}" style="max-width:100%;max-height:120px;border-radius:4px;" onerror="this.style.display='none'"/></div>` : ''}
                  </div>
                `;
              }
              // 关系信息
              if (params.dataType === 'edge') {
                const relationship = params.data;
                const sourceNode = nodes.find(n => n.id === relationship.source);
                const targetNode = nodes.find(n => n.id === relationship.target);
                
                // 检查是否为产品关系
                if (relationship.type === 'UPSTREAM_OF') {
                  return `
                    <div style="padding:5px 0;">
                      <div style="font-weight:bold;margin-bottom:8px;font-size:14px;">产品关系</div>
                      <div>${sourceNode?.name || relationship.source} 是 ${targetNode?.name || relationship.target} 的上游</div>
                    </div>
                  `;
                }
                
                return `
                  <div style="padding:5px 0;">
                    <div style="font-weight:bold;margin-bottom:8px;font-size:14px;">关系详情</div>
                    <div>${sourceNode?.name || relationship.source} → ${targetNode?.name || relationship.target}</div>
                    <div style="margin-top:5px;">关系类型: ${relationship.value || '供应关系'}</div>
                  </div>
                `;
              }
              return `关系: ${params.data.value || '供应关系'}`;
            },
            extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);border-radius: 4px;padding:0 10px;'
          },
          legend: {
            data: hasProductNodes ? 
                  ['产品', '原材料', '高新技术企业', '普通企业'] : 
                  (isRiskGraph ? 
                    ['高新技术企业', '高风险(≥500)', '中高风险(100-499)', '中风险(50-99)', '较低风险(20-49)', '低风险(<20)'] : 
                    ['高新技术企业', '普通企业']),
            bottom: 10,
            textStyle: {
              fontSize: 12
            },
            itemWidth: 15,
            itemHeight: 10,
            selectedMode: false,
            itemGap: 20,
            padding: 15,
            borderRadius: 4,
            backgroundColor: 'rgba(250, 250, 250, 0.8)',
            borderColor: '#eee',
            borderWidth: 1,
            formatter: function(name) {
              // 为高风险和高新技术企业添加特殊标记
              if (name === '高风险(≥500)') {
                return '{highRisk|' + name + '}';
              } else if (name === '高新技术企业') {
                return '{highTech|' + name + '}';
              }
              return name;
            },
            textStyle: {
              rich: {
                highRisk: {
                  color: '#F56C6C',
                  fontWeight: 'bold'
                },
                highTech: {
                  color: '#409EFF',
                  fontWeight: 'bold'
                }
              }
            }
          },
          // 为图表设置起始视图控制
          grid: {
            show: false
          },
          graphic: isRiskGraph ? [
            {
              type: 'text',
              left: '5%',
              top: '5%',
              style: {
                text: '拖拽可移动节点位置',
                fill: '#999',
                fontSize: 12
              }
            }
          ] : [],
          // 开启平移缩放工具
          dataZoom: [
            {
              type: 'inside',
              filterMode: 'none'
            }
          ],
          series: [{
            type: 'graph',
            layout: isRiskGraph ? 'force' : 'force',
            animation: true,
            data: nodes,
            links: relationships,
            // 设置默认缩放级别，让更多节点可见
            zoom: 1.0, // 默认正常视图大小
            center: ['50%', '50%'],
            categories: hasProductNodes ? [
              { name: '产品' },
              { name: '原材料' },
              { name: '高新技术企业' },
              { name: '普通企业' }
            ] : (
              isRiskGraph ? [
                { name: '高新技术企业' },
                { name: '高风险(≥500)' },
                { name: '中高风险(100-499)' },
                { name: '中风险(50-99)' },
                { name: '较低风险(20-49)' },
                { name: '低风险(<20)' }
              ] : [
                { name: '高新技术企业' },
                { name: '普通企业' }
              ]
            ),
            force: {
              repulsion: 800, // 显著增加节点间的排斥力，防止节点挤在一起
              gravity: 0.03, // 进一步减小引力，让节点分布更均匀
              edgeLength: 350, // 增加边长度，让节点之间距离更远
              friction: 0.8, // 增加摩擦系数，让布局更稳定
              layoutAnimation: true
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              fontSize: 12,
              color: '#333',
              backgroundColor: 'rgba(255, 255, 255, 0.7)',
              padding: [3, 5],
              borderRadius: 3
            },
            // 修改edgeLabel配置，默认不显示关系标签
            edgeLabel: {
              show: false, // 默认不显示关系标签
              position: 'middle',
              formatter: '{c}',
              fontSize: 12,
              color: '#333',
              backgroundColor: 'rgba(255, 255, 255, 0.7)',
              padding: [3, 5],
              borderRadius: 3,
              distance: 3
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(255, 255, 255, 0.8)'
            },
            roam: true,
            draggable: true,
            // 设置边的样式，减小箭头
            lineStyle: {
              color: '#2980b9',
              width: 0.8, // 进一步减小线条宽度
              curveness: 0.2,
              opacity: 0.6 // 降低不透明度
            },
            // 显示箭头
            edgeSymbol: ['none', 'arrow'],
            edgeSymbolSize: [0, 4], // 进一步减小箭头大小
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 2 // 减小高亮时的线宽
              },
              edgeLabel: {
                fontSize: 12 // 减小高亮时的标签大小
              }
            }
          }]
        };

        try {
          console.log('[GraphVisualization] 设置图表选项');
          
          // 添加更多的数据检查
          if (!nodes.length) {
            console.warn('[GraphVisualization] 没有有效的节点数据，跳过图表渲染');
            return;
          }
          
          // 确保每个节点都有必要的属性
          nodes.forEach(node => {
            // 确保节点至少有id和name
            if (!node.id) {
              console.warn('[GraphVisualization] 节点缺少ID，可能导致渲染问题:', node);
            }
            // 确保有name字段，这是ECharts要求的
            if (!node.name) {
              node.name = String(node.id);
              console.warn('[GraphVisualization] 节点缺少name，已使用ID替代:', node.id);
            }
          });
          
          // 验证关系数据
          relationships.forEach((link, index) => {
            // 确保source和target都存在
            if (!link.source || !link.target) {
              console.warn(`[GraphVisualization] 第${index}个关系缺少源或目标:`, link);
            }
          });

          // 使用setTimeout让DOM有足够时间准备就绪
          setTimeout(() => {
            try {
              if (graphChart && graphChart.setOption) {
                graphChart.setOption(option, true); // 添加true参数进行全量更新
                console.log('[GraphVisualization] 图表渲染完成');
                
                // 根据节点数量调整初始视图缩放
                if (nodes.length > 30) {
                  // 如果节点数量很多，显著缩小视图
                  graphChart.setOption({
                    series: [{
                      zoom: 0.6,
                    }]
                  });
                } else if (nodes.length > 10) {
                  // 如果节点数量中等，中度缩小视图
                  graphChart.setOption({
                    series: [{
                      zoom: 0.75,
                    }]
                  });
                } else {
                  // 节点较少时，轻微缩小以适应更大的间距
                  graphChart.setOption({
                    series: [{
                      zoom: 0.9,
                    }]
                  });
                }
                
                // 添加节点点击事件
                graphChart.on('click', params => {
                  if (params.dataType === 'node') {
                    showCompanyDetail(params.data);
                  }
                });
              } else {
                console.error('[GraphVisualization] 图表实例无效，重新初始化');
                initChart();
              }
            } catch (innerError) {
              console.error('[GraphVisualization] 图表内部渲染失败:', innerError);
              // 尝试重新创建图表实例
              initChart();
            }
          }, 100);
        } catch (error) {
          console.error('[GraphVisualization] 设置图表选项失败:', error);
        }
      } catch (error) {
        console.error('[GraphVisualization] 更新图表数据失败:', error);
      }
    };

    // 显示企业详细信息
    const showCompanyDetail = (company) => {
      if (!company || !company.name) return;
      
      console.log('[GraphVisualization] 显示企业详情:', JSON.stringify(company));
      
      // 检查是否为产品或材料节点
      if (company.type === 'Product' || company.type === 'Material') {
        // 显示产品/材料详情弹窗
        let htmlContent = `
          <div style="max-width:600px;">
            <div style="text-align:center;font-size:18px;font-weight:bold;margin-bottom:15px;">${company.name}</div>
            <div style="border-top:1px solid #eee;border-bottom:1px solid #eee;padding:15px 0;margin-bottom:15px;">
              <div><span style="font-weight:bold;color:#666;">类型：</span>${company.type || '未知'}</div>
              ${company.description ? `<div style="margin-top:10px;"><span style="font-weight:bold;color:#666;">描述：</span>${company.description}</div>` : ''}
            </div>
          </div>
        `;
        
        // 显示弹窗
        ElMessageBox.alert(htmlContent, company.name, {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '关闭',
          customClass: 'company-detail-dialog'
        });
        
        return;
      }
      
      // 企业节点的原有处理逻辑
      // 获取企业数据，包括value中的数据
      let companyData = { ...company };
      if (company.value && typeof company.value === 'object') {
        companyData = { ...companyData, ...company.value };
      }
      
      console.log('[GraphVisualization] 弹窗处理后的数据:', 
        '员工数量:', companyData.employeeCount, 
        '成立年份:', companyData.establishYear,
        '风险数量:', companyData.riskCount);
      
      // 确保员工数量即使为0也正确显示
      let displayEmployeeCount = '未知';
      if (typeof companyData.employeeCount === 'number') {
        displayEmployeeCount = companyData.employeeCount;
      } else if (typeof companyData.staffCount === 'number') {
        displayEmployeeCount = companyData.staffCount;
      } else if (companyData.employeeCount === '0' || companyData.employeeCount === 0) {
        displayEmployeeCount = 0;
      } else if (companyData.staffCount === '0' || companyData.staffCount === 0) {
        displayEmployeeCount = 0;
      } else if (companyData.value && typeof companyData.value.employeeCount === 'number') {
        displayEmployeeCount = companyData.value.employeeCount;
      } else if (companyData.value && typeof companyData.value.staffCount === 'number') {
        displayEmployeeCount = companyData.value.staffCount;
      } else if (companyData.employeeCount === '未知' || companyData.staffCount === '未知') {
        displayEmployeeCount = '未知';
      }
      
      // 确保成立年份即使为0也正确显示
      let displayEstablishYear = '未知';
      if (typeof companyData.establishYear === 'number') {
        displayEstablishYear = companyData.establishYear > 0 ? companyData.establishYear : '未知';
      } else if (typeof companyData.establishedYear === 'number') {
        displayEstablishYear = companyData.establishedYear > 0 ? companyData.establishedYear : '未知';
      } else if (typeof companyData.foundYear === 'number') {
        displayEstablishYear = companyData.foundYear > 0 ? companyData.foundYear : '未知';
      } else if (companyData.value && typeof companyData.value.establishYear === 'number') {
        displayEstablishYear = companyData.value.establishYear > 0 ? companyData.value.establishYear : '未知';
      } else if (companyData.value && typeof companyData.value.establishedYear === 'number') {
        displayEstablishYear = companyData.value.establishedYear > 0 ? companyData.value.establishedYear : '未知';
      } else if (companyData.establishYear === '0' || companyData.establishYear === 0) {
        displayEstablishYear = '未知';
      } else if (companyData.establishedYear === '0' || companyData.establishedYear === 0) {
        displayEstablishYear = '未知';
      } else if (companyData.establishYear === '未知' || companyData.establishedYear === '未知') {
        displayEstablishYear = '未知';
      } else if (typeof companyData.establishYear === 'string' && !isNaN(parseFloat(companyData.establishYear))) {
        const year = parseFloat(companyData.establishYear);
        displayEstablishYear = year > 0 ? year : '未知';
      } else if (typeof companyData.establishedYear === 'string' && !isNaN(parseFloat(companyData.establishedYear))) {
        const year = parseFloat(companyData.establishedYear);
        displayEstablishYear = year > 0 ? year : '未知';
      }
      
      // 确保风险数量即使为0也正确显示
      const displayRiskCount = (typeof companyData.riskCount === 'number') ? 
        companyData.riskCount : 
        (companyData.value && typeof companyData.value.riskCount === 'number' ? 
          companyData.value.riskCount : 0);
      
      // 确保注册资本正确显示
      let displayRegisteredCapital = '未知';
      if (typeof companyData.registeredCapital === 'number') {
        displayRegisteredCapital = companyData.registeredCapital + '万元';
      } else if (typeof companyData.registeredCapital === 'string' && !isNaN(parseFloat(companyData.registeredCapital))) {
        displayRegisteredCapital = parseFloat(companyData.registeredCapital) + '万元';
      } else if (companyData.registeredCapital) {
        displayRegisteredCapital = companyData.registeredCapital;
      }
      
      // 构建详细信息HTML
      let companyHtml = `
        <div style="max-width:600px;">
          <div style="display:flex;align-items:center;justify-content:center;margin-bottom:15px;">
      `;
      
      // 如果有企业logo
      if (companyData.logo) {
        companyHtml += `
            <div style="margin-right:15px;">
              <img src="${companyData.logo}" style="max-width:120px;max-height:80px;border-radius:4px;" />
            </div>
        `;
      }
      
      companyHtml += `
            <div style="font-size:18px;font-weight:bold;">${company.name}</div>
          </div>
          <div style="border-top:1px solid #eee;border-bottom:1px solid #eee;padding:15px 0;margin-bottom:15px;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
              <div><span style="font-weight:bold;color:#666;">企业规模：</span>${companyData.companyScale || '未知'}</div>
              <div><span style="font-weight:bold;color:#666;">注册资本：</span>${displayRegisteredCapital}</div>
              <div><span style="font-weight:bold;color:#666;">员工数量：</span>${displayEmployeeCount}</div>
              <div><span style="font-weight:bold;color:#666;">成立年份：</span>${displayEstablishYear}</div>
              <div><span style="font-weight:bold;color:#666;">所在省份：</span>${companyData.province || '未知'}</div>
              <div><span style="font-weight:bold;color:#666;">是否高新：</span>${companyData.isHighTech ? '<span style="color:#409EFF">是</span>' : '否'}</div>
              <div><span style="font-weight:bold;color:#666;">风险数量：</span><span style="color:#F56C6C;font-weight:bold">${displayRiskCount}</span></div>
            </div>
          </div>
        </div>`;
      
      // 显示弹窗
      ElMessageBox.alert(companyHtml, company.name, {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '关闭',
        customClass: 'company-detail-dialog'
      });
    };

    const toggleFullscreen = () => {
      const container = graphContainer.value?.parentElement;
      if (!container) {
        console.error('未找到图表容器元素');
        return;
      }

      if (!isFullscreen.value) {
        try {
          // 在进入全屏前强制设置整个页面背景
          document.documentElement.style.backgroundColor = 'white';
          document.body.style.backgroundColor = 'white';
          
          // 设置容器及其父容器背景色为白色
          container.style.backgroundColor = 'white';
          container.style.background = 'white';
          
          // 设置graph-content和其他图表相关容器的背景色
          const graphContent = container.querySelector('.graph-content');
          if (graphContent) {
            graphContent.style.backgroundColor = 'white';
            graphContent.style.background = 'white';
          }
          
          // 设置内部元素背景色
          container.querySelectorAll('.graph-inner, .graph-container').forEach(el => {
            el.style.backgroundColor = 'white';
            el.style.background = 'white';
          });

          if (container.requestFullscreen) {
            container.requestFullscreen();
          } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen();
          } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
          } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
          }
          isFullscreen.value = true;
        } catch (error) {
          console.error('进入全屏模式失败:', error);
        }
      } else {
        try {
          // 添加安全检查 - 确保document仍然处于活动状态且有fullscreenElement
          if (!document.fullscreenElement && 
              !document.webkitFullscreenElement && 
              !document.mozFullScreenElement && 
              !document.msFullscreenElement) {
            console.log('当前没有元素处于全屏状态，直接更新状态');
            isFullscreen.value = false;
            return;
          }
          
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          isFullscreen.value = false;
        } catch (error) {
          console.error('退出全屏模式失败:', error);
          // 如果退出全屏失败，强制更新状态
          isFullscreen.value = false;
        }
      }

      setTimeout(() => {
        if (graphChart) {
          graphChart.resize();
        }
      }, 300);
    };

    const handleExport = () => {
      emit('export', props.graphData);
    };

    const handleResize = () => {
      graphChart?.resize();
    };

    // 监听数据变化重新渲染图表
    watch(() => props.graphData, async (newVal) => {
      console.log('[GraphVisualization] graphData 变化，准备更新图表', 
        newVal.nodes?.length || 0, '个节点');
      
      // 给DOM一些时间更新
      await nextTick();
      updateChart();
    }, { deep: true });

    onMounted(async () => {
      console.log('[GraphVisualization] 组件已挂载');
      await nextTick();
      initTimer = setTimeout(() => {
        initChart();
      }, 100);
      window.addEventListener('resize', handleResize);
      
      // 添加全屏变化事件监听
      document.addEventListener('fullscreenchange', handleFullscreenChange);
      document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
      document.addEventListener('mozfullscreenchange', handleFullscreenChange);
      document.addEventListener('MSFullscreenChange', handleFullscreenChange);
    });

    onUnmounted(() => {
      if (initTimer) {
        clearTimeout(initTimer);
      }
      if (graphChart) {
        graphChart.dispose();
      }
      window.removeEventListener('resize', handleResize);
      
      // 移除全屏变化事件监听
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
      document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
    });
    
    // 添加全屏变化事件处理函数
    const handleFullscreenChange = () => {
      // 检查当前是否有元素处于全屏状态
      const isCurrentlyFullscreen = !!document.fullscreenElement || 
                                 !!document.webkitFullscreenElement || 
                                 !!document.mozFullScreenElement || 
                                 !!document.msFullscreenElement;
      
      // 更新状态
      if (isFullscreen.value !== isCurrentlyFullscreen) {
        console.log('[GraphVisualization] 全屏状态变化:', isCurrentlyFullscreen);
        isFullscreen.value = isCurrentlyFullscreen;
        
        // 调整图表大小
        setTimeout(() => {
          if (graphChart) {
            graphChart.resize();
          }
        }, 300);
      }
    };

    return {
      graphContainer,
      isFullscreen,
      toggleFullscreen,
      handleExport
    };
  }
};
</script>

<style scoped>
.graph-visualization {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;
}

.graph-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  position: relative;
}

.graph-controls .control-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
}

.industry-info-header {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

.industry-info-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 700px;
  padding: 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  position: relative;
}

.info-label {
  font-weight: 500;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

.info-separator {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.03), rgba(0,0,0,0.08), rgba(0,0,0,0.03));
}

.info-value {
  color: var(--el-color-primary);
  font-weight: 700;
  font-size: 18px;
}

.graph-content {
  flex: 1;
  position: relative;
  min-height: 450px;
  background-color: var(--el-bg-color);
  border-radius: 4px;
  overflow: hidden;
}

.graph-inner {
  height: 100%;
  width: 100%;
}

.graph-container {
  height: 100%;
  min-height: 450px;
  width: 100%;
}

:deep(.el-empty) {
  padding: 40px 0;
}

/* 自定义企业详情弹窗样式 */
:global(.company-detail-dialog) {
  max-width: 650px !important;
  width: 90% !important;
}

:global(.company-detail-dialog .el-message-box__header) {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

:global(.company-detail-dialog .el-message-box__title) {
  font-size: 18px;
  color: var(--el-color-primary);
}

:global(.company-detail-dialog .el-message-box__content) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:global(.company-detail-dialog .el-message-box__status) {
  display: none;
}

/* 全屏模式相关样式 */
:fullscreen {
  background-color: white !important;
  background: white !important;
  width: 100vw !important;
  height: 100vh !important;
}

:-webkit-full-screen {
  background-color: white !important;
  background: white !important;
  width: 100vw !important;
  height: 100vh !important;
}

:-moz-full-screen {
  background-color: white !important;
  background: white !important;
  width: 100vw !important;
  height: 100vh !important;
}

:-ms-fullscreen {
  background-color: white !important;
  background: white !important;
  width: 100vw !important;
  height: 100vh !important;
}

::backdrop {
  background-color: white !important;
  background: white !important;
}

::-webkit-backdrop {
  background-color: white !important;
  background: white !important;
}

/* 全屏模式下的遮罩层 */
:fullscreen::before,
:-webkit-full-screen::before,
:-moz-full-screen::before,
:-ms-fullscreen::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white !important;
  z-index: -1;
}
</style> 